<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-forms :modelValue="formData">
      <!-- 工作区 -->
      <uni-card title="工作区" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.gongZuoQu" />
        </uni-forms-item>
      </uni-card>
      <!-- 消毒液 -->
      <uni-card title="消毒液" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.xiaoDuYe"
            :localdata="xiaoDuYe"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 消毒液更换时间 -->
      <uni-card title="消毒液更换时间" extra="必填*">
        <uni-forms-item>
          <view
            @click="datesPop = true"
            class="border-solid border-gray-300 flex items-center justify-between rounded h-10 border"
          >
            <text class="float-left ml-3">{{
              formData.xiaoDuYeGengHuanShiJian
            }}</text>
            <uni-icons
              class="float-right font-bold"
              type="arrow-down"
              size="18"
            ></uni-icons>
          </view>
        </uni-forms-item>
      </uni-card>
      <!-- 更换人员姓名 -->
      <uni-card title="更换人员姓名" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.gengHuanRenYunXingMing" />
        </uni-forms-item>
      </uni-card>
    </uni-forms>
    <ConfigComponent
      @clearFormData="clearFormData"
      @updateFormData="updateFormData"
      :formData="formData"
      name="xiaoDuYeGengHuan"
    />
  </scroll-view>
  <!-- 消毒液更换时间组件 -->
  <Dates
    v-model:selectedTime="formData.xiaoDuYeGengHuanShiJian"
    @timeSelected="handleTimeSelected"
    @popType="datesPop = $event"
    v-if="datesPop"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Dates from '@/components/Dates/Dates.vue';
import ConfigComponent from '@/components/ConfigComponent/ConfigComponent.vue';

const formData = ref({
  gongZuoQu: '', // 工作区
  xiaoDuYe: '', // 消毒液
  xiaoDuYeGengHuanShiJian: '', //消毒液更换时间
  gengHuanRenYunXingMing: '', // 更换人员姓名
});

// 消毒液数据
const xiaoDuYe = [
  { text: '冰铲消毒液', value: '冰铲消毒液' },
  { text: '小器具消毒液', value: '小器具消毒液' },
  { text: '砧板消毒液', value: '砧板消毒液' },
  { text: '厨具消毒液', value: '厨具消毒液' },
  { text: '刀具消毒液', value: '刀具消毒液' },
];
//消毒液更换时间
const datesPop = ref(false);
const handleTimeSelected = (time: string) => {
  datesPop.value = false;
  formData.value.xiaoDuYeGengHuanShiJian = time;
};

// 清空表单数据
const clearFormData = () => {
  formData.value = {
    gongZuoQu: '', // 工作区
    xiaoDuYe: '', // 消毒液
    xiaoDuYeGengHuanShiJian: '', //消毒液更换时间
    gengHuanRenYunXingMing: '', // 更换人员姓名
  };
};
// 更新表单数据
const updateFormData = (data: any) => {
  formData.value = data;
};
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
